<template>
  <div class="info-content">
    <div class="page-main-title">
      区域配置-{{ $route.query.parkName }}
      <div class="actions" v-if="isPermmited('PARK:CONFIG:MANAGE:AREA:UPDATE')">
        <a href="javascript:;" @click="toEditPage">编辑</a>
      </div>
    </div>
    <div class="info-main-content">
      <div class="area-box">
        <div class="area-item" v-for="(item, index) in areaList" :key="item.areaId">
          <div class="title">
            {{ item.parentAreaName ? `${item.parentAreaName} - ${item.areaName}` : `${item.areaName}` }}
          </div>
          <ul class="area-item-bd">
            <li v-for="(item, index) in item.channelList">{{ item }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from '@mixins/common.js';
import { difference } from 'lodash';

export default {
  props: ['parkId'],
  mixins: [common],
  data() {
    return {
      areaList: []
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      API.fetchGet('/operatorPark/getParkAreaInfoByParkID', {
        parkID: this.parkId,
        page: 1,
        rows: 10000
      }).then(res => {
        this.areaList = res.data.rows.map(item => {
          let channelList = item.entranceChannelNameStr.split(',').concat(item.exitChannelNameStr.split(','));
          item.channelList = difference(channelList, ['']);

          return item;
        });
      });
    },
    toEditPage() {
      this.$router.push({
        path: '/parkingLot/allParkingLot/area',
        query: this.$route.query
      });
    }
  }
};
</script>

<style lang="less" scoped>
@import '../../../../assets/less/base/variables.less';
@import '../../../../assets/less/base/newTabPageCommom.less';
.info-main-content {
  padding: 18px 20px 20px 18px;
}

.area-box {
  display: flex;
  flex-wrap: wrap;
  .area-item {
    width: 280px;
    height: 330px;
    background: #ffffff;
    border: 1px solid #d7dce2;
    border-radius: 4px;
    margin-right: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    .title {
      background: #f2f2f2;
      border-bottom: 1px solid #d7dce2;
      font-size: 14px;
      color: #666666;
      height: 40px;
      line-height: 40px;
      padding-left: 20px;
      padding-right: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .area-item-bd {
      padding: 20px;
      height: 290px;
      overflow-y: scroll;
      li {
        font-size: 14px;
        color: #666666;
        margin-bottom: 14px;
        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}
</style>
